import {LitElement, html, css} from 'lit';
import {customElement} from 'lit/decorators.js';

// 使用 @customElement 装饰器定义组件名称
@customElement('main-header')
export class MainHeader extends LitElement {

  // 定义组件的样式
  static styles = css`
      :host {
          display: flex;
          padding: 16px;
          background-color: #fafafa;
          border: 1px solid #f1f1f1;
          
          flex-direction: row;
          align-items: center;
          gap: 12px;
      }
  `;

  // 定义组件的渲染逻辑
  render() {
    return html`
      <h2>Quick Tabs 快捷导航</h2>
    `;
  }
}

// 确保组件在浏览器中注册
declare global {
  interface HTMLElementTagNameMap {
    'main-header': MainHeader;
  }
}